import { Col, Row,Tag } from 'antd';
import {CaretRightOutlined} from '@ant-design/icons'
import { deleteRoles } from '../../../api/roles';
function RowRender(props:RolesRowPropType){
    let {recoder} = props;
    console.log(recoder)
    // 删除指定权限
    let removeRoles =async (e:any,rolesid:number)=>{
        // 阻止默认⌚️
        e.preventDefault();
        let res:ResponsType = await deleteRoles(recoder.id,rolesid);
        props.over(res)
    }
    return (
        <div>
            {/* 渲染一级权限 */}
            {
                recoder.list?.map((item:ListType,index:number)=>{
                    return (
                        <Row key={index} style={{margin:"15px 0",borderBottom:"1px solid #f1f1f1",}}>
                            <Col span={5}>
                                <Tag color="cyan" closable onClose={(e)=>removeRoles(e,item.id)}>{item.authName}</Tag><CaretRightOutlined />
                            </Col>
                            <Col span={19}>
                                {/* 渲染二级权限 */}
                                {
                                    item.list?.map((two:ListType,i:number)=>{
                                        return (
                                            <Row key={i} style={{marginBottom:"15px"}}>
                                                <Col span={5}>
                                                <Tag color="green" closable onClose={(e)=>removeRoles(e,two.id)}>{two.authName}</Tag ><CaretRightOutlined />
                                                </Col>
                                                <Col span={19}>
                                                    {/* 渲染三级权限 */}
                                                    {
                                                      two.list && two.list.map((three:ListType,j:number)=>{
                                                        return    <Tag color="orange" closable key={j} style={{marginBottom:"10px"}} onClose={(e)=>removeRoles(e,three.id)}>{three.authName}</Tag>
                                                    })
                                                    }
                                                </Col>
                                            </Row>
                                        )
                                    })
                                }
                            </Col>
                        </Row>
                    )
                })
            }
        </div>
    )
}

export default RowRender;